import React, { useEffect, useState } from 'react';
import { NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.css';
import { Search, Toast } from 'react-vant';
import http from '../../utils/http';
interface ForYou {
  textid: string;
  texttitle: string;
  textdescword: string;
  texttype: string;
  doctorimage: string;
  doctorname: string;
  doctorstate: string;
}
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [pageSize] = useState(10);
  const [pageCode, setPageCode] = useState(1);
  const [value, setValue] = useState('');
  const backnanke = () => {
    navigate(-1);
  };

  const getlist = () => {
    http.get('/book/list', {
      params: {
        pageCode: pageCode,
        pageSize: pageSize,
        search: value
      }
    }).then((result) => {
      const { code, data } = result.data;
      if (code === 20000) {
        setList(data);
      }
    });
  };

  // 完善后的点击搜索功能
  const handSearch = () => {
    setPageCode(1);
    setList([]);
    getlist();
  };

  const toforyouxiang = (item: ForYou) => {
    // 跳转到为你推荐详情页面，并传递医生id作为路由参数
    navigate(`/toforyoudeilte/${item.textid}`);
  };

  // 用于上拉加载，标识是否正在加载更多数据
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  useEffect(() => {
    getlist();
  }, []);

  // 监听页面滚动，实现上拉加载效果
  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

      // 判断是否滚动到接近页面底部（这里设定距离底部100px时触发加载更多）
      if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoadingMore) {
        setIsLoadingMore(true);
        loadMoreData();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [isLoadingMore]);

  const loadMoreData = () => {
    setPageCode(prevPageCode => prevPageCode + 1);
    http.get('/book/list', {
      params: {
        pageCode: pageCode,
        pageSize: pageSize,
        search: value
      }
    }).then((result) => {
      const { code, data } = result.data;
      if (code === 20000) {
        setList(prevList => [...prevList, ...data]);
      }
      setIsLoadingMore(false);
    }).catch(() => {
      Toast.fail('加载更多数据失败');
      setIsLoadingMore(false);
    });
  };

  return (
    <div>
      <div className={styles.nav}>
        <NavBar onBack={backnanke}>皮肤性病_妙手医生</NavBar>
      </div>
      <div>
        <Search
          showAction
          actionText={<div onClick={() => handSearch()}>搜索</div>}
          value={value}
          onChange={setValue}
          placeholder="搜一搜解决健康问题"
        />
      </div>
      <div>
        <div className={styles.list}>
          {list.map((item: ForYou, index) => (
            <div className={styles.listItem} onClick={() => toforyouxiang(item)} key={index}>
              <h3>{item.texttitle}</h3>
              <div className={styles.listbtm}>
                <div>
                  <p>{item.doctorname}</p>
                  <p>{item.doctorstate}</p>
                  <p className={styles.listdesc}>{item.textdescword}</p>
                </div>
                <img src={item.doctorimage} alt="" />
              </div>
            </div>
          ))}
          {isLoadingMore && <div className={styles.loadingMore}>正在加载更多数据...</div>}
        </div>
      </div>
    </div>
  );
};

export default Index;